/* 液态玻璃导航栏效果 */
:global(.navbar) {
  --mouse-x: 50%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

/* 深色模式下的效果 */
:global([data-theme="dark"] .navbar) {
  background: rgba(15, 23, 42, 0.25);
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 2px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* 滚动后的效果 */
:global(.navbar--scrolled) {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.18),
    0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
  backdrop-filter: blur(25px) saturate(200%);
}

:global([data-theme="dark"] .navbar--scrolled) {
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 4px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* 液态波纹效果移除，保持简洁 */

/* 导航栏内容的液态玻璃增强 */
:global(.navbar__inner) {
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
  position: relative;
}

/* 为导航栏添加微妙的渐变边框 */
:global(.navbar__inner::before) {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

:global([data-theme="dark"] .navbar__inner::before) {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.02) 100%
  );
}

/* 导航链接的基础样式 */
:global(.navbar__link) {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  padding: 8px 16px;
  margin: 0 4px;
  overflow: hidden;
}

/* Logo 的基础样式 */
:global(.navbar__brand) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  padding: 8px 12px;
  overflow: hidden;
}

/* 搜索框的液态玻璃效果 */
:global(.navbar__search-input) {
  background: rgba(255, 255, 255, 0.2) !important;
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  backdrop-filter: blur(15px) saturate(150%);
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  border-radius: 25px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 8px 16px !important;
  box-shadow: 
    0 2px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

:global(.navbar__search-input:focus) {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(74, 144, 226, 0.4) !important;
  box-shadow: 
    0 0 0 3px rgba(74, 144, 226, 0.15),
    0 4px 20px rgba(74, 144, 226, 0.2) !important;
}

:global([data-theme="dark"] .navbar__search-input) {
  background: rgba(15, 23, 42, 0.4) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #f1f5f9 !important;
  box-shadow: 
    0 2px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:global([data-theme="dark"] .navbar__search-input:focus) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(100, 200, 255, 0.4) !important;
  box-shadow: 
    0 0 0 3px rgba(100, 200, 255, 0.15),
    0 4px 20px rgba(100, 200, 255, 0.25) !important;
}

/* 动画增强 */
@keyframes liquidRipple {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  :global(.navbar) {
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }
  
  :global(.navbar--scrolled) {
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
  }
}

/* 为固定导航栏腾出空间 */
:global(body) {
  padding-top: var(--ifm-navbar-height);
}

/* 改善移动端菜单的液态玻璃效果 */
:global(.navbar-sidebar) {
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  backdrop-filter: blur(25px) saturate(180%);
  background: rgba(255, 255, 255, 0.96) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 
    4px 0 20px rgba(0, 0, 0, 0.15),
    inset -1px 0 0 rgba(255, 255, 255, 0.4);
}

:global([data-theme="dark"] .navbar-sidebar) {
  background: rgba(15, 23, 42, 0.96) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 
    4px 0 20px rgba(0, 0, 0, 0.4),
    inset -1px 0 0 rgba(255, 255, 255, 0.12);
}